<template>
  <div class="integral">
    <el-button type="primary" @click="openEditor()">新增</el-button>

    <!--    <el-table class="table" :data="integralList" border>-->
    <!--      <el-table-column align="center" type="index" label="序号" width="100"/>-->
    <!--      <el-table-column align="center" prop="name" label="积分名称"/>-->
    <!--      <el-table-column align="center" prop="code" label="积分编码"/>-->
    <!--      <el-table-column align="center" prop="cateName" label="分类名称"/>-->
    <!--      <el-table-column align="center" prop="defaultValue" label="默认值"/>-->
    <!--      <el-table-column align="center" label="操作">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button type="text" @click="openEditor(scope.row.id)">编辑</el-button>-->
    <!--          <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <el-collapse>
      <el-collapse-item v-for="(item,index) in integralList" :key="index" title="积分编码设置" name="1">
        <template slot="title">
          <p class="auto-title">
            <span>{{item.name}}</span>
<!--            <el-button type="text" @click.stop="autoDelectOdd(item.quesInfo)">自动去重</el-button>-->
            <el-button @click="subclassification()" type="text" icon="el-icon-plus">新增</el-button>
          </p>
        </template>
      </el-collapse-item>
    </el-collapse>
    <el-pagination
      class="pagination"
      background
      :total="totalCount"
      :current-page.sync="pageIndex"
      @current-change="pageChanged"
      layout="prev, pager, next, total">
    </el-pagination>

    <integral-editor ref="integralEditor" @refresh="loadIntegralList()"></integral-editor>
    <integral-addor v-if="addOrUpdateVisible" ref="integralAddor"></integral-addor>
  </div>
</template>

<script>
  import IntegralEditor from './integral-editor'
  import IntegralAddor from './integral-addor'

  export default {
    name: 'integral',
    components: {IntegralEditor, IntegralAddor},
    data () {
      return {
        addOrUpdateVisible: false,
        integralList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0
      }
    },
    activated () {
      this.loadIntegralList()
      this.getParentRuleList()
    },
    methods: {
      getParentRuleList () {
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/getParentRuleList'),
          method: 'post',
        }).then(res => {
          console.log(res)
          this.integralList = res.data
        })
      },
      pageChanged (val) {
        this.pageIndex = val
        this.loadIntegralList()
      },
      async loadIntegralList () {
        let res = await this.$http({
          method: 'post',
          url: '/integral-admin/integral/list',
          data: ({
            page: this.pageIndex,
            limit: this.pageSize
          })
        })
        this.integralList = res.data.list
        this.totalCount = res.data.totalCount
      },
      openEditor (id) {
        this.$refs.integralEditor.open(id)
      },
      subclassification (id) {
        this.addOrUpdateVisible = true
        this.$refs.integralAddor.init(id)
      },
      async deleteById (id) {
        let confirm = await this.$confirm('您确认删除此积分规则吗？', '提示', {
          confirmText: '确认',
          cancelText: '取消',
          type: 'warning'
        })

        if (!confirm) return false

        let res = await this.$http({
          method: 'post',
          url: '/integral-admin/integral/delete',
          data: ({ids: [id]})
        })

        if (res.code === 200) {
          this.$message.success('删除积分规则成功')
          this.loadIntegralList()
        }
      }
    },
    created () {
      this.loadIntegralList()
    }
  }
</script>

<style lang="less">
  .auto-title {
    display: flex;
    justify-content: space-between;
  }

  .integral {

    .table {
      margin-top: 20px;
    }

    .pagination {
      margin-top: 20px;
      text-align: left;
    }
  }
</style>
